<template>
	<div>
		<div class="my_head">
			<div class="my_back" @click="$router.push({path:routt})">
			</div>
			登陆 | 注册
		</div>
		<div class="logininfo" style="background: #fff;">
			<van-cell-group>
				<van-field v-model="username" label="用户名" colon placeholder="请输入用户名" required />
			</van-cell-group>
			<van-cell-group>
				<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required error-message />
			</van-cell-group>
			<div style="margin: 1rem;">
				<van-button type="primary" block round @click="verification" :disabled='active'>登录</van-button>
			</div>
			<van-button style="float: right;height: 1.25rem;background: transparent;" to='/Login/register'>立即注册
			</van-button>
		</div>
	</div>
</template>

<script>
	import Cookie from 'js-cookie'
	import Vue from 'vue';
	import {
		Field
	} from 'vant';
	import {
		Button
	} from 'vant';
	import {
		Cell,
		CellGroup
	} from 'vant';

	Vue.use(Cell);
	Vue.use(CellGroup);
	Vue.use(Button);
	Vue.use(Field);
	import {
		Toast
	} from 'vant';

	export default {
		data() {
			return {
				username: '',
				password: '',
				active: true,
				//接收从哪个路由过来的
				routt: ''
			}
		},
		beforeRouteEnter(to, from, next) {
			// console.log(from)
			// console.log(to)
			next(vm => {
				//设置从哪个路由来的
				if (from.fullPath == '/Shopping') {
					localStorage.clear()
					vm.routt = '/'
				}else{
					if(from.fullPath == '/Order'){
						localStorage.clear()
						vm.routt = '/My'
					} else {
						if(from.fullPath == '/Login/register'){
							vm.routt = '/'
						}else{
							vm.routt = from.fullPath
						}
				}
				}
			})
		},
		methods: {
			verification() {
				let tel = this.username
				let password = this.password
				this.$http.post('/login/login', {
					tel,
					password
				}).then(res => {
					// console.log(res)
					switch (res.data.code) {
						case -1:
							Toast.loading({
								message: res.data.message,
								duration: 300
							})
							break;
						case -2:
							Toast.loading({
								message: res.data.message,
								duration: 300
							})
							break;
						case 200:
							//可以登录的时候
							// 将token存到cookie里
							// Cookie.set('token',res.data.token)
							// Cookie.set('u_id',res.data.u_id)
							localStorage.setItem('u_id', res.data.u_id)
							localStorage.setItem('token', res.data.token)
							// console.log(localStorage.getItem('token'))
							//将token整到vuex里面
							this.$store.commit('setToken', res.data.token)
							this.$store.commit('setTel', res.data.u_id)
							Toast.loading({
								message: res.data.message,
								duration: 300
							})
							this.$store.state.userinfo = res.data.message
							// Cookie.set('message',res.data.message)
							localStorage.setItem('message', res.data.message)
							//将message整到vuex里面
							this.$store.commit('setMessage', res.data.message)
							// console.log(this.routt)
							this.$router.push({
								path: this.routt
							})
							break;
					}
				})
			}
		},
		watch: {
			username() {
				if (this.username.length != 0 && this.password != 0) {
					this.active = false
				} else {
					this.active = true
				}
			},
			password() {
				if (this.username.length != 0 && this.password != 0) {
					this.active = false
				} else {
					this.active = true
				}
			}
		}
	};
</script>

<style>
	.logininfo {
		/* position: fixed;
		display: flex;
		width: 100%;
		top: 46px;
		bottom: 0;
		justify-items: center; */
		margin-top: 2.875rem;
	}
</style>
